<template>
	<div id="AddEdit">
		<x-header :left-options="{showBack: false}" title="新建地址" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
			<a slot="right" class="save" @click="receiverAddInfo()">保存</a>
		</x-header>
		<form action="" id="addForm">
			<x-input type="text" class="name" v-model="username" placeholder="请输入联系人" />
			<x-input type="text" class="name" :show-clear="false" keyboard="number" is-type="china-mobile" required v-model="tel" placeholder="请输入手机号" />
			<!--<br />-->
			<group class="address">
				<x-address class="block" title="" v-model="addressValue" @on-shadow-change="onShadowChange" raw-value :list="addressData" value-text-align="left" label-align="justify">
				</x-address>
			</group>
			<div class="text">
				<x-textarea v-model="street" name="" id="txt" :cols="30" :rows="7" placeholder="请输入详细地址如街道、楼牌号等">
				</x-textarea>
			</div><br /><br /><br />
			<div class="default">
				<!--默认为1-->
				<span>设为默认地址</span>
				<div class="circle">
					<check-icon :value.sync="agree"></check-icon>
				</div>
			</div>
		</form>
		<toast v-model="success" type="text" width='3.2rem' is-show-mask>{{msg}}</toast>
	</div>
</template>

<script>
	import $ from 'jquery'
	import { XHeader, ChinaAddressData, XAddress, CheckIcon, XInput, XTextarea, Toast, Group, Value2nameFilter as value2name } from 'vux'
	export default {
		data() {
			return {
				tel: '',
				addressData: ChinaAddressData,
				value2: ['天津市', '市辖区', '和平区'],
				value3: ['广东省', '中山市', '--'],
				value5: ['广东省', '深圳 市', '南山区'],
				addressValue: ['河南省', '郑州市', '二七区'],
				agree: false,
				username: '',
				street: '',
				receiver_province: '',
				receiver_city: '',
				receiver_county: '',
				receiver_address: '',
				receiver_default: '',
				defaults: '',
				success: false,
				msg: '',
				url: '',
				order_from: '',
				order_sn: '',
				urls: '',
				order_url: '',
				receiver_id: ''
			}
		},
		components: {
			XHeader,
			ChinaAddressData,
			XAddress,
			CheckIcon,
			XInput,
			Toast,
			XTextarea,
			Group
		},
		beforeRouteEnter(to, from, next) {
			console.log(from);
			next(vm => {
				vm.url = from.path;
			})
		},
		deactivated() {
			this.$destroy();
		},
		methods: {
			onShadowChange: function(ids, names) {
				this.addressValue = names;
				this.receiver_province = this.addressValue[0];
				this.receiver_city = this.addressValue[1];
				this.receiver_county = this.addressValue[2];
			},
			//上传编辑地址信息
			receiverAddInfo: function() {
				if(this.agree == true) {
					this.defaults = 1;
				} else {
					this.defaults = 0;
				}
				var params = {
					receiver_name: this.username,
					receiver_tel: this.tel,
					receiver_province: this.receiver_province,
					receiver_city: this.receiver_city,
					receiver_county: this.receiver_county,
					receiver_address: this.street,
					receiver_default: this.defaults,
				}
				var reg1 = /^((13|14|15|17|18)[0-9]{1}\d{8})$/;　　　　　　　　　
				if(!reg1.test(this.tel) || this.tel == "") {
					this.success = !this.success;
					this.msg = '请输入正确手机号'
				} else if(this.username == '' || this.street == '') {
					this.success = !this.success;
					this.msg = '请完善个人信息'
				} else {
					this.$http({
						method: 'POST',
						url: '/los/api/member/receiver_add.json',
						data: params
					}).then((result) => {
						console.log(result);
						if(result.data.code == 1) {
							this.success = !this.success;
							this.msg = result.data.msg;
							this.order_from = this.$route.params.order_from;
							this.order_sn = this.$route.params.order_sn;
							this.urls = this.$route.params.urls;
							this.receiver_id = result.data.data.receiver.receiver_id;
							this.order_url = '';
							console.log(this.order_from);
							if(this.order_from == undefined) {
								setTimeout(function() {
									location.href = "#/AddManage"
								}, 500);
								return;
							} else {
								if(this.order_from == 'auction_order') {
									this.order_url = '/los/api/auction/order_receiver.json';
									var params = {
										order_sn: this.order_sn,
										receiver_id: this.receiver_id
									}
								} else if(this.order_from == 'seckill_order') {
									this.order_url = '/los/api/seckill/order_receiver.json';
									var params = {
										order_sn: this.order_sn,
										receiver_id: this.receiver_id
									}
								} else if(this.order_from == 'auction_signup') {
									this.order_url = '/los/api/auction/signup_receiver.json';
									var params = {
										signup_id: this.order_sn,
										receiver_id: this.receiver_id
									}
								}
								console.log(this.order_url);
								console.log(params);
								if(this.order_url != '') {
									this.$http({
										method: 'POST',
										url: this.order_url,
										data: params
									}).then((result) => {
										console.log(result);
										let urls = this.urls;
										this.$router.push({
											path: urls
										})
									}).catch((err) => {
										console.log(err);
									})
								}
							}
						}
					}).catch((err) => {
						console.log(err);
					})
				}
			},
			back: function() {
				window.history.go(-1);
			},
			changeData() {
				this.value2 = ['430000', '430400', '430407']
			},
			changeDataByLabels() {
				this.value2 = ['广东省', '广州市', '天河区']
			},
			changeDataByLabels2() {
				this.value2 = ['广东省', '中山市', '--']
			},
			getName(value) {
				return value2name(value, ChinaAddressV4Data)
			},
		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}
	
	.vux-header-right .save {
		color: #333;
		font-size: 0.37rem;
	}
	
	#addForm {
		position: relative;
		width: 100%;
		height: 100%;
	}
	
	#addForm:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #f3f3f3;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	.name {
		background: #fff;
		height: 1.3rem;
		line-height: 1.3rem;
	}
	
	#addForm input {
		padding: 0.26rem;
		width: 100%;
		height: 1.3rem;
		line-height: 1;
		font-size: 0.37rem;
		color: #333;
	}
	
	#addForm .block {
		width: 100%;
		overflow: hidden;
	}
	
	#addForm .text {
		width: 100%;
		height: 2.8rem;
		overflow: hidden;
		background: #fff;
		position: relative;
	}
	
	#addForm .text:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #f3f3f3;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}
	
	#addForm .text #txt {
		resize: none;
		height: 100%;
		color: #aaa;
	}
	
	#addForm .default {
		width: 100%;
		height: 1.3rem;
		line-height: 1.3rem;
		background: #fff;
		padding: 0 0.26rem;
		overflow: hidden;
		margin-top: 0.26rem;
	}
	
	#addForm .default span {
		color: #333;
		font-size: 0.37rem;
		display: inline-block;
		line-height: 1.3rem;
	}
	
	#addForm .default .circle {
		float: right;
	}
	
	.vux-cell-box {
		background: #fff;
	}
	
	.vux-cell-box:not(:first-child):before {
		border: none!important;
	}
	
	.vux-cell-box {
		height: 1.3rem;
	}
	
	.vux-tap-active {
		padding: 0!important;
	}
	
	.weui-cell:before {
		left: 0;
	}
	
	.weui-input {
		margin-left: 0.26rem!important;
	}
	
	.weui-cell:before {
		border-top: solid 1px #f3f3f3;
	}
	
	#addForm .address {
		position: relative;
		margin-top: 0.03rem;
	}
	/*#addForm .address:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid #000;
		color: #e6e6e6;
		transform-origin: 0 0;
		transform: scaleY(0.5);
	}*/
</style>